<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <!--    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">-->
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="../../../js/jquery.mini.js"></script>

</head>
<body>

<table class="layui-hide" id="test"></table>


<!--<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>-->

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<!--<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url:'http://192.168.0.103:8005/test/data'
            , totalRow: true
            , cellMinWidth: 80,
            // method:'post',
            response:{
                // statusName:'code',
                statusCode: 200,
                // msgName:'msg',
                // dataName:'data'
            }
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.list
                }
           }
           , cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'networkName', width: 120, title: '网点名称'},
                {field: 'bankName', width: 120, title: '银行名称', sort: true},
                {field: 'personCount', width: 80, title: '人员数'},
                {field: 'asset', title: '资产', width: '30%', minWidth: 100}
            ]],
            page: true
        });

        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(test)', function(obj){
            var data = obj.data;

            layer.alert(JSON.stringify(data), {
                title: '当前行数据：'
            });

            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
    });
</script>-->


<script>
    $.ajax({
        url:'http://192.168.0.103:8005/test/data',
        type: "GET",
        dataType: 'json',
        success: function (res) {
            // window.alert('===' + JSON.stringify(res))
            //数据处理
            // for (var item in res.datas) {
            //     renderInfo(res.datas[item], idList, amountList, remarksList);
            // }
            //
            renderInfo(res.data.list)
        }
    });

    function renderInfo(listDate) {

        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#test'
                // , url:'http://192.168.0.103:8005/test/data'
                , totalRow: true
                , cellMinWidth: 80,
                data: listDate,
                // method:'post',
                // response:{
                //     // statusName:'code',
                //     statusCode: 200,
                //     // msgName:'msg',
                //     // dataName:'data'
                // }
                // , parseData: function (res) {
                //     return {
                //         "code": res.code,
                //         "msg": res.msg,
                //         "count": res.data.total,
                //         "data": res.data.list
                //     }
                // }
                 cols: [[
                    {field: 'id', width: 80, title: 'ID', sort: true},
                    {field: 'networkName', width: 120, title: '网点名称'},
                    {field: 'bankName', width: 120, title: '银行名称', sort: true},
                    {field: 'personCount', width: 80, title: '人员数'},
                    {field: 'asset', title: '资产', width: '30%', minWidth: 100}
                ]],
                page: true,
                // data: listDate,
                done: function (obj, first) {
                    //切换分页时候回调事件
                    console.log(obj);
                    console.log(first);
                    if (first != 1) {
                        //第一次进入不调用
                    }
                }
            });

            //监听行单击事件（双击事件为：rowDouble）
            table.on('row(test)', function(obj){
                var data = obj.data;
                layer.alert(JSON.stringify(data), {
                    title: '当前行数据：'
                });
                //标注选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            });
        });

   /*     var table = layui.table;
        table.render({
            elem: '#test'
            // ,skin: 'nob' //无边框风格
            // , toolbar: '#toolbarDemo'
            , title: '产品数据表'
            // , totalRow: true
            // , cols: [
            //     [
            //         {type: 'checkbox', fixed: 'left'}
            //         , {
            //         field: 'id',
            //         title: 'ID',
            //         width: 80,
            //         fixed: 'left',
            //         unresize: true,
            //         cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
            //         sort: true,
            //         totalRowText: '合计'
            //     }
            //         , {field: 'productName', title: '功能模块'}
            //     ]
            // ]
                , cols: [[
                    {field: 'id', width: 80, title: 'ID', sort: true},
                    {field: 'networkName', width: 120, title: '网点名称'},
                    {field: 'bankName', width: 120, title: '银行名称', sort: true},
                    {field: 'personCount', width: 80, title: '人员数'},
                    {field: 'asset', title: '资产', width: '30%', minWidth: 100}
                ]]
            , data: listDate
            // , page: true  //是否显示分页

        });*/
    }
</script>
</body>
</html>
